<template>
  <view class="notice card-page">

    <Search @search='onSearch' placeholder="请输入关键字搜索" />
    <view class="notice-box">
      <tabs :active-color='themeColorLight' bar-width='100' :list="tabLists" :is-scroll="false" :current.sync="currentTab"
        @handleChange="change"></tabs>
      <noticeL class="notice-list" :noticeList="infoList" :showRead="true"/>
    </view>

    <Load :load='load'></Load>
  </view>
</template>
<script>
  import {
    transHtml
  } from '@/common/js/common.js'
  import {
    themeColorLight
  } from '@/static/js/theme.js'
  import {
    getGuide
  } from '@/api/otherService.js'
  import Load from '@/components/Load/index.vue'
  import noticeL from '@/components/NoticeList/NoticeList.vue'
  import tabs from '@/components/leftTabs/leftTabs.vue'
  import Search from '@/components/Search/searchEmpty.vue'

  export default {
    components: {
      Load,
      noticeL,
      tabs,
      Search
    },
    data() {
      return {
        themeColorLight,
        currentTab: 0,
        guideType: 1,
        tabLists: [{
          name: '公告'
        }, {
          name: '咨询'
        }],
        infoList: [{}],
        load: true
      }
    },
    mounted() {
      this.initDate()
    },
    methods: {
      initDate() {
        let params = {
          guideType: this.guideType
        }
        this.load = true
        getGuide(params).then(data => {
          this.load = false
          let res = data || []
          res.forEach(item => {
            item.remarkHtml = transHtml(item.mark)
          })
          this.infoList = res
        }).catch(e => {
          this.infoList = []
          this.load = false
        })
      },
      change(val) {
        this.currentTab = val
        if (val === 0) {
          this.guideType = 1
        } else if (val === 1) {
          this.guideType = 2
        }
        this.initDate()
      },
      toPage(item) {
        uni.navigateTo({
          url: `/pages/Home/Notice/detail?id=${item.id}`
        })
      },
      onSearch() {

      }
    }
  };
</script>

<style lang="scss" scoped>
  .notice {
    height: 100%;
  }

  .notice-box {
    background-color: #FFF;
    padding: 0 24upx;
    border-radius: 8upx;
    height: calc(100% - 100upx);
  }

  .notice-list {
    height: calc(100% - 120upx);
  }
</style>